const path = require('path');
// 导入在内存中生成 HTML 页面的 插件
// 只要是插件 都一定要 放到 plugins 节点中去
const htmlWebpackPlugin = require('html-webpack-plugin');
//添加 vue-loader 插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports={
    mode:'development',
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'bundle.js'
    },
    devServer:{
        open:true,
        contentBase:'src',
        port:3030,
        hot:true
    },
    plugins:[ //配置插件的节点
        // new webpack.HotModuleReplacementPlugin() //new 一个热更新的模块对象，这是启用热更新的第三步
        new htmlWebpackPlugin({ //创建一个在内存中生成 HTML页面的插件
            template:'./src/index.html', //指定模板页面，将来会根据指定的页面路径去生成内存中的页面
            filename:'index.html' //指定生成的页面的名称
        }),
        new VueLoaderPlugin()
    
    ],
    module:{
        rules:[
            { test:/\.css$/, use:['style-loader','css-loader'] },
            { test:/\.less$/, use:['style-loader','css-loader','less-loader'] },
            { test:/\.scss$/, use:['style-loader','css-loader','sass-loader'] },
            {
                test: /\.(png|jpg|gif|ttf)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 8192
                    }
                  }
                ]
              },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins:['@babel/plugin-proposal-class-properties',["component",
                            {
                                "libraryName":"mint-ui",
                                "style":true
                            }
                        ]]
                    }
                }
            },
            { test:/\.vue$/, use:'vue-loader'} //处理.vue文件的loader
        ]
    },
    resolve:{
        alias:{ //修改 Vue 被导入时候的包的路径
            "vue$":"vue/dist/vue.js"
        }
    }
}